<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2024-09-26 16:08:42
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2025-03-31 11:38:06
 * @FilePath: \hy-ui\src\views\trainingCenter\components\trainingPlan.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div v-loading="loading">
    <div class="trainingPlan" v-if="active === '1'">
      <div class="trainingPlanMainOther" v-if="activeName === '1'">
        <div>
          <div class="trainingPlan_top_bar">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="培训计划" name="1"></el-tab-pane>
              <el-tab-pane label="自学课" name="2"></el-tab-pane>
            </el-tabs>
            <div class="addBtn" v-if="activeName === '2'">
              <el-button type="warning" size="mini" @click="handleAdd">添加选修课程</el-button>
            </div>
          </div>
          <div class="cardCnt" v-if="list.length">
            <div class="cardList" v-for="item in list" :key="item.id">
              <div class="listTopBar">
                <span>{{ item.planName }}</span>
              </div>
              <div class="train_plan_detail_msg">
                <div>
                  <span style="color: #999">起止时间：</span>{{
                    `${initDate(
                      item.startTime,
                      "YYYY-MM-DD"
                    )}&nbsp;至&nbsp;${initDate(item.endTime, "YYYY-MM-DD")}`
                  }}
                </div>
                <div class="train_plan_peo">
                  <span>培训类型：</span>&nbsp;{{
                    item.trainType === "1"
                    ? "线上培训"
                    : item.trainType === "2"
                      ? "线下培训"
                      : "无培训"
                  }}
                </div>
                <div class="train_plan_peo" v-if="item.trainType === '2'">
                  <span>负责人：</span><span style="margin-right: 20px">{{
                    item.offlineTrainDirector
                  }}</span>
                </div>
                <div class="train_plan_peo" v-if="item.trainType === '2'">
                  <span>讲师：</span><span style="margin-right: 20px">{{
                    item.offlineTrainLecturer
                  }}</span>
                </div>
                <div class="train_plan_peo" v-if="item.trainType === '2'">
                  <span>地点：</span><span style="margin-right: 20px">{{
                    item.offlineTrainLocation
                  }}</span>
                </div>
              </div>
              <div class="trainingPlanList" v-if="item.trainType !== '2'">
                <div class="trainingPlanItem" v-for="val in item.courses" :key="val.id" @click="
                  handleDetail(val, '2', {
                    planId: item.id,
                    courseId: val.id,
                    lesson: val,
                  })
                  ">
                  <div class="coverImg">
                    <img :src="getImg(val.picture)" alt="" />
                  </div>
                  <div class="itemTitle">
                    {{ val.title }}
                  </div>
                  <div class="detail" style="flex-direction: column">
                    <div style="color: #f19b19; margin-bottom: 12px; white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;">
                      {{ item.planName }}
                    </div>
                    <div style="display: flex; justify-content: space-between">
                      <span :style="{ color: getColor(val.status, true) }">{{
                        getColor(val.status)
                      }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="planNoData" v-else>
                <img src="../../../assets/images/planNoData.png" alt="" />
                <span>暂无课程</span>
              </div>
            </div>
          </div>
          <div class="planNoData" v-else style="width: 100%">
            <img src="../../../assets/images/planNoData.png" alt="" />
            <span>暂无计划</span>
          </div>
        </div>
      </div>
      <div class="trainingPlanMain" v-if="activeName === '2'">
        <div v-if="!isAdd">
          <div class="trainingPlan_top_bar">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="培训计划" name="1"></el-tab-pane>
              <el-tab-pane label="自学课" name="2"></el-tab-pane>
            </el-tabs>
            <!-- <el-checkbox-group v-model="value">
              <el-checkbox label="1">已完成</el-checkbox>
              <el-checkbox label="2">学习中</el-checkbox>
              <el-checkbox label="3">未完成</el-checkbox>
            </el-checkbox-group> -->
            <div class="addBtn" v-if="activeName === '2'">
              <el-button type="warning" size="mini" @click="handleAdd">添加自学课程</el-button>
            </div>
          </div>
          <div class="trainingPlanList" :style="{ display: 'flex' }">
            <!-- <div v-if="list.length">

            </div> -->
            <div v-show="list.length" class="trainingPlanItem" v-for="item in list" :key="item.id" @click="
              handleDetail(item, '2', {
                planId: '',
                courseId: item.courseId,
                lesson: item,
              })
              ">
              <div class="coverImg">
                <img :src="getImg(item.picture)" alt="" />
              </div>
              <div class="itemTitle">
                {{ item.title }}
              </div>
              <div class="detail" style="flex-direction: column">
                <div style="color: #f19b19; margin-bottom: 12px">
                  {{ item.categoryTitle }}
                </div>
                <div style="display: flex; justify-content: flex-start">
                  <span :style="{ color: getColor(item.status, true) }">{{
                    getColor(item.status)
                  }}</span>
                </div>
              </div>
            </div>
            <div class="planNoData" v-show="!list.length" style="width: 100%">
              <img src="../../../assets/images/planNoData.png" alt="" />
              <span>暂无课程</span>
            </div>
          </div>
        </div>
        <div v-else class="chooseCourse">
          <div class="topBar">
            <span style="display: flex; align-items: center">
              <span @click="handleBack"><img src="../../../assets/images/goBack.png" alt=""
                  style="margin-right: 6px" />返回已选课程列表</span>
              <span style="color: red; font-size: 12px">（请先添加后再翻页）</span>
            </span>
            <el-button type="warning" size="mini" @click="moreAdd">批量添加</el-button>
          </div>
          <div class="trainingPlanList">
            <div class="trainingPlanItem" v-for="item in list" :key="item.id" @click="handleChoose(item)">
              <div class="coverImg">
                <img :src="getImg(item.picture)" alt="" />
              </div>
              <div class="itemTitle">
                {{ item.title }}
              </div>
              <div class="detail">
                <span :style="{ color: '#999999' }">讲师：{{ item.lector }}</span>
                <el-checkbox v-model="item.isChoose" :disabled="item.joinFlag === 1"></el-checkbox>
              </div>
            </div>
          </div>
        </div>
        <div class="pagination" style="width: 100%">
          <pagination v-show="total > 0" :page-sizes="[20, 40, 60, 80, 100]" :total="total"
            :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"
            :background="false" />
        </div>
      </div>
    </div>
    <Courselist v-if="active === '2'" :goBack="handleDetail" :planId="courseware.planId" :courseId="courseware.courseId"
      :lesson="courseware.lesson" />
    <BeginExam v-if="active === '3'" :goBack="handleDetailOther" />
  </div>
</template>

<script>
import Courselist from "@/views/trainingCenter/components/courselist";
import BeginExam from "@/views/trainingCenter/components/beginExam";
import PlanDetail from "@/views/trainingCenter/components/planDetail";
import {
  selfStudyCourseList,
  getCouPlan,
  courseCenter,
  addSelfStudyCourse,
} from "@/api/trainingCenter";
import moment from "moment";

export default {
  components: {
    Courselist,
    BeginExam,
    PlanDetail,
  },
  data() {
    return {
      loading: false,
      activeName: "1",
      active: "1",
      isAdd: false,
      value: [],
      total: 0,
      queryParams: {
        pageSize: 20,
        pageNum: 1,
      },
      list: [],
      courseware: {
        planId: "",
        courseId: "",
        lesson: {},
      },
    };
  },
  async mounted() {
    await this.getCouPlanList();
  },
  methods: {
    handleDetail(row, type, obj) {
      if (type === "2") {
        this.courseware = obj;
      }
      this.active = type;
    },
    handleDetailOther() {
      this.active = "2";
    },
    // 获取计划列表
    async getCouPlanList() {
      this.loading = true;
      const res = await getCouPlan();
      this.list = res.data;
      this.loading = false;
    },
    // 获取自学课列表
    async getSelfStudyCourseList() {
      this.loading = true;
      const res = await selfStudyCourseList({ ...this.queryParams });
      this.list = res.data.list || [];
      this.total = res.data.total;
      this.loading = false;
    },
    // 点击tab
    async handleClick() {
      this.reset();
      if (this.activeName === "1") {
        await this.getCouPlanList();
      } else {
        await this.getSelfStudyCourseList();
      }
    },
    // 获取所有课程
    async getCourseCenterList() {
      this.loading = true;
      const res = await courseCenter({
        ...this.queryParams,
      });
      this.total = res.data.total;
      this.list = res.data?.list || [];
      this.loading = false;
    },
    //添加已选课程
    async moreAdd() {
      const ids = [];
      this.list.forEach((item) => {
        if (!!item.isChoose) {
          ids.push(item.id);
        }
      });
      if (ids.length) {
        this.loading = true;
        const res = await addSelfStudyCourse({ ids: ids.toString() });
        if (res.code === 200) {
          this.$message.success("添加成功");
          this.getCourseCenterList();
        }
        this.loading = false;
      }else{
        return this.$message.error('请选择课程后添加！')
      }
    },
    reset() {
      this.list = [];
      this.total = 0;
      this.queryParams = {
        pageSize: 20,
        pageNum: 1,
      };
    },
    async handleAdd() {
      this.isAdd = true;
      this.getCourseCenterList();
    },
    async handleBack() {
      this.isAdd = false;
      this.activeName = "2";
      await this.getSelfStudyCourseList();
    },
    handleChoose(item) {
      if (item.joinFlag === 1) return
      item.isChoose = !item.isChoose;
    },
    getColor(status, isColor) {
      let mapObj = {
        2: {
          title: "已完成",
          color: "#2F54EB",
        },
        1: {
          title: "学习中",
          color: "#FF1E1E",
        },
        0: {
          title: "未开始",
          color: "#999999",
        },
      };
      if (isColor) {
        return mapObj[status].color;
      }
      return mapObj[status].title;
    },
    getImg(data) {
      let img = undefined;
      if (!!data) {
        img = JSON.parse(data);
      }
      if (img?.length) {
        return img[0].url;
      }
      return require("../../../assets/images/banner1.png");
    },
    initDate(date, format) {
      return moment(date).format(format);
    },
  },
};
</script>
 
<style lang="scss" scoped>
.trainingPlan {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f4f4f4;
  padding: 30px 0 0 0;
  min-height: calc(100vh - 135px);

  .pagination {
    width: calc(100% - 720px);
    display: flex;
    justify-content: flex-end;

    ::v-deep .pagination-container {
      width: 100%;
      background: transparent;
      margin-top: 0;

      .el-pager li,
      .btn-prev,
      .btn-next {
        background: transparent;
      }

      .el-input__inner {
        background: transparent;
      }
    }
  }

  .trainingPlanMainOther {
    width: 1192px;
    border-radius: 6px;
    padding: 17px 24px 0 24px;

    .planNoData {
      padding: 30px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      span {
        font-weight: 500;
        font-size: 12px;
        color: #bbbbbb;
        line-height: 48px;
      }
    }

    .chooseCourse {
      .topBar {
        display: flex;
        justify-content: space-between;
        align-items: center;

        &>span {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 14px;
          color: #666666;
          cursor: pointer;
        }
      }
    }

    ::v-deep .el-tabs__nav-wrap::after {
      display: none;
    }

    .trainingPlan_top_bar {
      position: relative;
    }

    .addBtn {
      position: absolute;
      right: 0;
      top: 10px;
    }

    .cardCnt {
      overflow-y: auto;
      height: 72vh;
    }

    .cardList {
      background: #fff;
      border-radius: 10px;
      padding: 20px 23px 0 23px;
      margin-top: 0px;
      width: 100%;
      margin-bottom: 20px;

      .planNoData {
        padding: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        span {
          font-weight: 500;
          font-size: 12px;
          color: #bbbbbb;
          line-height: 48px;
        }
      }
    }

    .listTopBar {
      display: flex;
      // justify-content: space-between;
      align-items: center;
      padding-bottom: 12px;

      span {
        font-weight: 400;
        font-size: 14px;
        color: #000000;
      }
    }

    .train_plan_detail_msg {
      display: flex;
      // padding: 12px 13px;
      margin-bottom: 6px;
      color: #333;
      font-size: 14px;
      align-items: center;
      justify-content: flex-start;
      margin-top: -2px;

      div {
        margin-right: 50px;
      }

      .train_plan_peo {
        // width: 30%;
        // overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        height: 19px;
      }
    }

    .trainingPlanList::-webkit-scrollbar-track {
      background: #fff;
    }

    .trainingPlanList::-webkit-scrollbar {
      height: 6px;
    }

    // .trainingPlanList:hover {
    //   &::-webkit-scrollbar {
    //      height: 6px;
    //   }
    // }
    .trainingPlanList {
      width: 100%;
      display: flex;
      // flex-wrap: wrap;
      overflow-x: auto;
      white-space: nowrap;
      height: 310px;
      padding: 10px 0px 26px 0px;

      .trainingPlanItem {
        cursor: pointer;
        padding: 10px;
        background: #fff;
        box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        width: calc((100% - 60px) / 4);
        margin-left: 12px;
        height: 268px;
        &:hover img {
          transform: scale(1.1);
        }

        .coverImg {
          width: 100%;
          height: 150px;
          overflow: hidden;
          border-radius: 10px;

          img {
            width: 100%;
            height: 100%;
            transition: 1000ms ease all;
          }
        }

        .itemTitle {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 14px;
          color: #333333;
          margin: 12px 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          line-height: 20px;
        }

        .detail {
          display: flex;
          justify-content: space-between;
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #666;
        }
      }
    }
  }

  .trainingPlanMain {
    width: 1192px;
    background: #ffffff;
    border-radius: 6px;
    padding: 17px 24px;

    .planNoData {
      padding: 30px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      span {
        font-weight: 500;
        font-size: 12px;
        color: #bbbbbb;
        line-height: 48px;
      }
    }

    .chooseCourse {
      .topBar {
        display: flex;
        justify-content: space-between;
        align-items: center;

        &>span {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 14px;
          color: #666666;
          cursor: pointer;
        }
      }
    }

    ::v-deep .el-tabs__nav-wrap::after {
      display: none;
    }

    .trainingPlan_top_bar {
      position: relative;
    }

    .addBtn {
      position: absolute;
      right: 0;
      top: 10px;
    }

    .trainingPlanList {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      // grid-template-columns: 1fr 1fr 1fr 1fr;
      // grid-column-gap: 11px;
      // grid-row-gap: 16px;
      // justify-items: stretch;
      // align-items: start;
      // margin-top: 20px;
      overflow-y: auto;
      height: 68vh;

      .trainingPlanItem {
        width: 268px;
        margin-right: 11px;
        margin-top: 16px;
        cursor: pointer;
        padding: 10px;
        background: #fff;
        box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        height: 268px;
        &:hover img {
          transform: scale(1.1);
        }

        .coverImg {
          width: 100%;
          height: 150px;
          overflow: hidden;
          border-radius: 10px;

          img {
            width: 100%;
            height: 100%;
            transition: 1000ms ease all;
          }
        }

        .itemTitle {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 14px;
          color: #333333;
          margin: 12px 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          line-height: 20px;
        }

        .detail {
          display: flex;
          justify-content: space-between;
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #666;
        }
      }
    }
  }
}
</style>